<template>
	<div class=" materialShopManage wrap_common gongdiguanli">
		<uni_tab :tabCur.sync="tabActive" :tab-list="conle_tabList" @change="swiperChange"></uni_tab>

		<view class="contentBox">
			<view v-if="tabActive==0">
				<app-manage-list :manageData="manageData"
								:list="list"
								:selectFilter="true"
								@onSearch="onSearch"
								@openPopup="openPopup"
								@checkList="checkList"
								@changeAllCheck="changeAllCheck"
								@jumpListFn="jumpListFn">
					<template  v-slot:selectFilter>
						<app_sxFilter  ref="sxFilter" :tabCur.sync="tabActiveB" :active.sync="active"
						:tab-list="tabListB"  :navList="navList" :contentList="contentList" :propKey="propKey"
						@change="changeFN"  @choseNav='choseNav'  @choseContent='choseContent' >
						</app_sxFilter>
					</template>
					<template v-slot:shopAwx0="{item}">
						<div class="share-info">
							<div>
								<span>{{item.building_area}}m²&nbsp;|&nbsp;{{item.house_structure}}&nbsp;|&nbsp;{{item.decorate_style_name}}</span>
							</div>
							<div>
								<span>
									<img class="middle" style="width: 12px;height: 12px;"
									:src="`../../static/images/localposition_small.png`" alt="">
									<span class="middle">{{item.community_name}}</span>
								</span>
								<span class="" style="margin: 0 0 0 10px;">{{item.community_address}}</span>
								<span>{{item.between}}km</span>
							</div>
							<div>
<!-- 							<span>
								<img v-for="(i,k) in item.share_img" :key="k" class="userIcon" :src="i" alt="">
							</span> -->
								<span>{{item.share_num}}人分享&nbsp;|&nbsp;浏览{{item.view_num}}人</span>
							</div>
						</div>
					</template>
					<template v-slot:shopBwx0="{item}">
						<div class="item_list_bottom">
							<div class="shop_btn_com" v-if="item.is_my && $util.shieldReview()" @click.stop="updateItem( {id: item.site_id,site_info_id: item.site_info_id,current_stage_group_id: item.current_stage_group_id,current_stage_id: item.current_stage_id,is_my: item.is_my})">
								更新
							</div>
							<div class="shop_btn_com" @click.stop="topSiteFn(item.site_id)" v-if="item.be_top">置顶</div>
							<div class="shop_btn_com" @click.stop="putOffFN(item.site_id)">隐藏</div>
							<div class="shop_btn_com share_btn" @click.stop="shareBtnFn(item)">
								<i class="iconfont iconfenxiang"></i>
								分享
							</div>
						</div>
					</template>
					<template #bottomBtnWrap>
						<div class="shop_btn_wrap">
							<div class="shop_btn_com" @click="putOffFN()">批量隐藏</div>
						</div>
					</template>
				</app-manage-list>
			</view>
			<view v-if="tabActive==1">
				<app-manage-list :manageData="manageData"
													:list="list"
													:selectFilter="true"
													@onSearch="onSearch"
													@openPopup="openPopup"
													@checkList="checkList"
													@changeAllCheck="changeAllCheck"
													@jumpListFn="jumpListFn">
					<template  v-slot:selectFilter>
						<app_sxFilter ref="sxFilter" :tabCur.sync="tabActiveB"
																						:active.sync="active"
																							:tab-list="tabListB"
																							:navList="navList"
																							:contentList="contentList"
																							:propKey="propKey"
																							@change="changeFN"
																							@choseNav='choseNav'
																							@choseContent='choseContent'>
						</app_sxFilter>
					</template>
					<template v-slot:shopAwx1="{item}">
						<div class="share-info">
							<div>
								<span>{{item.building_area}}m²&nbsp;|&nbsp;{{item.house_structure}}&nbsp;|&nbsp;{{item.decorate_style_name}}</span>
							</div>
							<div>
								<span>
									<img class="middle" style="width: 14px;height: 14px;"
														:src="`../../static/images/localposition_small.png`" alt="">
									<span class="middle">{{item.community_name}}</span>
								</span>
								<span class="" style="margin: 0 0 0 10px;">{{item.community_address}}</span>
<!--								<span>{{item.between}}km</span>-->
							</div>
							<div>
<!-- 							<span>
								<img v-for="(i,k) in item.share_img" :key="k" class="userIcon" :src="i" alt="">
							</span> -->
								<span>{{item.share_num}}人分享&nbsp;|&nbsp;浏览{{item.view_num}}人</span>
							</div>
						</div>
					</template>
					<template v-slot:shopBwx1="{item}">
						<div class="item_list_bottom">
							<div class="shop_btn_com" @click.stop="delSiteFn(item.site_info_id)">删除</div>
							<div class="shop_btn_com primary_btn" @click.stop="putOnFN(item.site_info_id)">
								展示
							</div>
						</div>
					</template>
					<!-- 底部按钮 -->
					<template v-slot:bottomBtnWrap>
						<div class="shop_btn_wrap">
<!--							<div class="shop_btn_com" @click="delSiteFn">批量删除</div>-->
							<div class="shop_btn_com primary_btn" @click="putOnFN()">批量展示</div>
						</div>
					</template>
				</app-manage-list>
			</view>
			<view v-if="tabActive==2">
				<app-manage-list :manageData="manageData"
								 :list="list"
								 :selectFilter="true"
								 @onSearch="onSearch"
								 @openPopup="openPopup"
								 @checkList="checkList"
								 @changeAllCheck="changeAllCheck"
								 @jumpListFn="jumpListFn">
					<template  v-slot:selectFilter>
						<app_sxFilter  ref="sxFilter" :tabCur.sync="tabActiveB" :active.sync="active"
									   :tab-list="tabListB"  :navList="navList" :contentList="contentList" :propKey="propKey"
									   @change="changeFN"  @choseNav='choseNav'  @choseContent='choseContent' >
						</app_sxFilter>
					</template>
					<template v-slot:shopAwx2="{item}">
						<div class="share-info">
							<div>
								<span>{{item.building_area}}m²&nbsp;|&nbsp;{{item.house_structure}}&nbsp;|&nbsp;{{item.decorate_style_name}}</span>
							</div>
							<div>
								<span>
									<img class="middle" style="width: 14px;height: 14px;"
										 :src="`../../static/images/localposition_small.png`" alt="">
									<span class="middle">{{item.community_name}}</span>
								</span>
								<span class="" style="margin: 0 0 0 10px;">{{item.community_address}}</span>
<!--								<span>{{item.between}}km</span>-->
							</div>
							<div>
<!-- 							<span>
								<img v-for="(i,k) in item.share_img" :key="k" class="userIcon" :src="i" alt="">
							</span> -->
								<span>{{item.share_num}}人分享&nbsp;|&nbsp;浏览{{item.view_num}}人</span>
							</div>
						</div>
					</template>
					<template v-slot:shopBwx2="{item}">
						<div class="item_list_bottom">
							<div class="shop_btn_com primary_btn"
										@click.stop="putOnFN(item.site_info_id)">展示
							</div>
							<div class="shop_btn_com share_btn" @click.stop="shareBtnFn(item)">
								<i class="iconfont iconfenxiang"></i>
								赚￥
								<span class="big_text"> {{item.profit}}</span>
								/{{ item.goods_unit }}
							</div>
						</div>
					</template>
					<!-- 底部按钮 -->
					<template v-slot:bottomBtnWrap>
						<div class="shop_btn_wrap">
							<div class="shop_btn_com primary_btn" @click="putOnFN()">批量展示</div>
						</div>
					</template>

				</app-manage-list>
			</view>
		</view>

		<!--筛选弹窗-->
		<view class="filter_wrap">
			<raiders-filter ref="raidersFilter"
							@filterQuery="filterQuery"
							:filter-mask-data.sync="filterMaskData"
							@filterBtnCall="filterBtnCall"/>
		</view>

		<!-- 分享弹窗 -->
		<!-- <uni-popup ref="popupFx" maxHeight="100vh">
			<div class="share_wrap">
				<div class="share_img">
					<img :src="sharePosterImg" alt  mode="widthFix" />
				</div>
			</div>
		</uni-popup> -->

		<add-com-icon v-if="$util.shieldReview()" @add="addRaiders"/>

	</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import uni_tab from '@/components/uni_tab.vue'
import AppManageList from '@/components/appManageList'
import RaidersFilter from '@/pages/components/RaidersFilter.vue'
import { jumpShop } from '@/utils/common'
import manage from './mixins/manage'
import AddComIcon from '@/components/module/AddComIcon'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import app_sxFilter from '@/components/app-sxFilter/app_sxFilter.vue'

// js
import list from '@/mixins/list'

// api
import { getList, getPoster, putOn, putOff, delSite, topSite
	, getDecorateStyle, getCityCommunity, getSiteNum
} from '@/api/article/construciton'

import { geocoder, suggestion } from '@/api/common/index'

export default {
	name: 'construciton-manage',
	mixins: [manage, list],
	components: {
		uni_tab,
		AppManageList,
		AddComIcon,
		RaidersFilter,
		uniPopup,
		app_sxFilter
	},
	data() {
		return {
			constant: this.$constant,
			tabActive: 0,
			tabList: [{ name: '展示中' }, { name: '已隐藏' }, { name: '内容中心' }],
			conle_tabList: [],
			// ==下来筛选==
			active: false,
			tabActiveB: 0,
			tabListB: [{ name: '小区' }],
			propKey: { 'navKey': 'region_name', 'contentKey': 'dhc_name' },
			navList: [],
			contentList: [],
			// ==下来筛选结束==
			// 分享商品弹窗
			sharePosterImg: '',
			// 筛选块
			cloneFilterMaskData: [],
			filterMaskData: [
				{
					title: '装修风格',
					type: 2,
					// key: 'source_type',
					list: []
				}
			],
			listParams: {}
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad(option) {
	    this.option = option
	},
	onShow() {
		this.init()
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.resize()
	},
	// 加载更多
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this.getItemList()
		}
	},
	methods: {
		init() {
			this.getItemList()
			this.getSiteNumFN()
			this._getClass()
			this.getCityCommunityFN()
		},
		resize() {
			let data = this.manageData
			data.checkList = []
			this.resetList()
			this.getItemList()
			this.getSiteNumFN()
		},
		// ==获取列表==
		getItemList() {
			let hostData = this.manageData

			let decorate_style = []
			hostData.isFilterList.catData.filter(item => {
				decorate_style.push(item.id)
			})

			let params = {
			    ...this.listParams,
				page: this.list.page,
				limit: this.list.limit,
				search_type: this.tabActive == 2 ? 1 : 0,
				on_show: this.tabActive == 2 ? null : (this.tabActive == 0 ? 1 : 0),
				search_name: hostData.search,
				decorate_style
			}
			getList(params).then(res => {
				uni.stopPullDownRefresh()
				if (res.status === 'success') {
					let data = res.data

					// 字段转换
					for (let i = 0; i < data.list.length; i++) {
						let jsonKey = data.list[i]
						jsonKey._imgUrl = jsonKey.cover
						jsonKey._isSelf = jsonKey.is_original
						jsonKey.status = false
						jsonKey._isSelfText = jsonKey.is_original == 0 ? '平台' : ''
						jsonKey._title = jsonKey.name
					}

					this.completes(res)
				}
			})
		},

		getSiteNumFN() {
			getSiteNum().then(res => {
				if (res.status === 'success') {
					let data = res.data
					this.conle_tabList = this.commonJS.deepCopy(this.tabList)
					this.conle_tabList[0]['name'] = ` ${this.tabList[0]['name']}(${data.on_num})`
					this.conle_tabList[1]['name'] = ` ${this.tabList[1]['name']}(${data.off_num})`
					this.conle_tabList[2]['name'] = ` ${this.tabList[2]['name']}(${data.center_num})`
				}
			})
		},
		// 获取小区
		getLocation() {
		    return new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						resolve({
							latitude: res.latitude,
							longitude: res.longitude
						})
					},
					fail: () => {
						resolve(false)
					}
				})
			})
		},
		geocoder(geocoderData) {
			return new Promise((resolve, reject) => {
				geocoder(geocoderData).then(res => {
					console.log(res)
					resolve(res)
				})
			})
		},
		async getCityCommunityFN() {
			let geocoderData = await this.getLocation()
			let resMap = null
			if (geocoderData) {
				resMap = await this.geocoder(geocoderData)
			}
			let city_code = resMap ? resMap.result.ad_info.adcode : null
			let city = resMap ? resMap.result.ad_info.city : null
			console.log(city_code)
			getCityCommunity({
				city_code,
				city
			}).then(res => {
				if (res.status == 'success') {
				    let list = res.data.list
					this.navList = list
					if (list.length) {
						this.contentList = list[0].community_list
					}
				}
			})
		},

		// ==tab滑动切换==
		swiperChange(index) {
			this.tabActive = index
			this.filterQuery()
		},

		// ==下拉帅选==
		changeFN(index) {
			// console.log(index, this.active)
		},
		choseNav(obj) {
		    this.contentList = obj.item.community_list
			this.choseContent({ chose: false })
		},
		choseContent(obj) {
			this.listParams.community_id = obj.chose ? obj.item.dhc_id : null
			this.manageData.isFilterList.community = obj.chose ? { name: obj.item.dhc_name } : null
			this.resize()
		},

		// ===筛选===
		openPopup() {
			this.$refs.raidersFilter.$refs.screen.openPopup()
		},
		// 获取分类筛选
		_getClass() {
			getDecorateStyle().then(res => {
				this.filterMaskData[0].list =	this.$refs.raidersFilter.formatSelect(res.data.list, this.filterMaskData[0].key, true)
				this.cloneFilterMaskData = this.commonJS.deepCopy(this.filterMaskData)
			})
		},
		// 筛选按钮回调
		filterBtnCall(items) {
			let data = this.manageData

			// 多选
			if (items.value == 'multi') {
				this.filterMaskData[2].list = items.list
			}

			if (items.key == 'source_type') {
				data.isFilterList.sourceData = ''
				data.isFilterList.sourceData = items.status ? items : ''
			} else {
				if (items.value == 'multi') {
					data.isFilterList.catData = []
				}
				console.log(items)
				if (items.status) {
					data.isFilterList.catData.push(items)
				} else {
					data.isFilterList.catData = data.isFilterList.catData.filter(filterItem => filterItem.id != items.id)
				}
			}
			this.resize()
		},
		// 清空过滤器
		filterQuery() {
			this.manageData.isFilterList.catData = []
			this.manageData.isFilterList.sourceData = ''

			this.filterMaskData = this.commonJS.deepCopy(this.cloneFilterMaskData)
			this.resize()
		},

		// ===功能模块===
		// 更新
		updateItem(multiId) {
		    let query = {
				owner_user_id: this.option.owner_user_id,
				...multiId
			}
			uni.navigateTo({
				url: `/pages/constructionSite/update${this.commonJS.queryData(query)}`
			})
		},
		// 置顶
		topSiteFn(id) {
			let params = {
				site_id: id
			}
			topSite(params).then(res => {
				this.resize()
			})
		},
		// 上架
		putOnFN(id) {
			let params = {
				site_info_id: id ? [id] : this.manageData.checkList
			}
			putOn(params).then(res => {
				this.resize()
			})
		},
		// 下架
		putOffFN(id) {
			let params = {
				site_id: id ? [id] : this.manageData.checkList
			}
			putOff(params).then(res => {
				this.resize()
			})
		},
		// 删除
		delSiteFn(id) {
			let params = {
				site_info_id: id
			}
			this.delGoodsFn(delSite, params, this.resize)
		},
		// ==分享==
		shareBtnFn(item) {
			let params = {
				site_id: item.site_id,
				mini_page: `/pages/constructionSite/detail${this.commonJS.queryData({
					owner_user_id: this.option.owner_user_id,
					id: item.site_id,
					share: 1
				})}`
			}
			getPoster(params).then(res => {
				if (res.status === 'success') {
					this.sharePosterImg = res.data.poster_url
					uni.previewImage({
						current: 0,
						urls: [this.sharePosterImg],
						loop: false
					})
					// this.$refs.popupFx.open()
				}
			})
		},
		// ==跳转详情==
		jumpListFn(item) {
			let query = {
				owner_user_id: this.option.owner_user_id,
				id: item.site_id
			}
			uni.navigateTo({
				url: `/pages/constructionSite/detail${this.commonJS.queryData(query)}`
			})
		},
		// 添加
		addRaiders() {
			let query = {
				owner_user_id: this.option.owner_user_id
			}
			uni.navigateTo({
				url: `/pages/constructionSite/add${this.commonJS.queryData(query)}`
			})
		}

	}
}
</script>

<style lang="scss" scoped>
	.materialShopManage {
		width: 100%;
		min-height: 100vh;
		overflow-y: auto;
		background-color: #f5f5f5;

		// 公共商品分享弹窗
		.shareGoodsMask {
			width: 70%;
			border-radius: 5px; /*no*/
		}

		.share_info {
			margin-top: 10px;

			& > div {
				margin-top: 10px;
			}

			#moduleUserAttr {
				margin-right: 10px;
			}
		}

		// 公共按钮
		.shop_btn_com {
			padding: 0 40px;
			font-size: 24px;
			border-radius: 50px;
			border: 1px solid #eee;
			margin-left: 20px;
			height:56px;
			display: flex;
			align-items: center;
		}

		.primary_btn {
			color: #3a1b04;
			background-color: $mainColor;
			border: 1px solid $mainColor;
		}

		.no_primary_btn {
			color: #fff;
			background-color: #ccc;
			border: 1px solid #ccc;
		}

		.red_text {
			color: #e43c36;
		}

		.sub_text_color {
			color: $fontColor2;
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
		}

		.pop_tip {
			padding: 30px 0 0;
			width: 560px;
			overflow: hidden;
			background-color: #fff;

			h3 {
				padding: 0 40px 20px;
				line-height: 60px;
				font-size: 32px;
			}

			.txt {
				padding: 0 40px 20px;
				line-height: 44px;
				font-size: 28px;
				color: #666;
			}

			.btn {
				display: flex;
				border-top: 1px solid #ddd;

				button {
					font-size: 28px;
					flex: 1;
					background: none;
					border: none;
					line-height: 90px;
				}

				button + button {
					border-left: 1px solid #ddd;
				}

				.yes {
					color: #ff6900;
				}
			}
		}
	}
</style>

<style lang="scss" scoped>
	// .share_wrap{
	// 	img	{
	// 		height: auto;
	// 	}
	// }

	.middle {
		vertical-align: middle;
	}

	.share-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;

		img {
			display: inline-block;
		}

		& > div {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			line-height: 30px;
			margin-bottom: 8px;
		}

		.userIcon {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}

	}

	.item_list_bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 10px;

		.share_btn {
			color: #fff;
			border-color: #ff7d6d;
			background: linear-gradient(90deg, #ff7d6d, #ff4444);
			display: flex;
			align-items: center;
			font-size: 24px;
			padding: 0 30px;
			height:56px;
			border-radius: 50px;
			border: 1px solid #eeeeee;
			margin-left: 20px;
			.iconfont{
				font-size: 24px;
			}

			i {
				margin-right: 8px;
			}

			.big_text {
				font-size: 32px;
			}
		}
	}

</style>
